<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="w" uri="/water-tags"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<s:component template="include-css-main.ftl"></s:component>
		<s:component template="include-css-page.ftl"></s:component>
		<s:component template="include-js-jquery.ftl"></s:component>
		<title>expand</title>
	</head>
	<body>
		<s:url id="index_url" value="/"/>
		<a href="${index_url}">主页</a>
		<br /><br />
		<w:container id="con1"  cssStyle="width:40%;">
		    <w:containerheader title="expand"></w:containerheader>
		    <w:containermiddle>
				<w:layout columns="1" cssStyle="width:100%;">
					<w:package label="Country">
						<s:textfield label="年龄" size="30" id="country" name="country" expand="autocomplete" data="'../hr/lbr/countries_list_json'" options="minChars:0,matchContains:true,returnTextField:'countryName',valueId:'hidden1',returnValueField:'countryId',width:400,
						 formatItem:function(row,i,max){return '<td>'+row.countryId+'</td><td>'+row.countryName+'</td>';}"></s:textfield>
						<s:hidden name="hidden1" id="hidden1"></s:hidden>
						<a href="#" onclick="alert($('#hidden1').val());return false;">get data</a>
					</w:package>
					<s:textfield label="日期1" expand="datepicker" id="datepicker1" name="datepicker1"></s:textfield>
					<s:textfield label="日期2" expand="datepicker" id="datepicker2" name="datepicker2" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期3" expand="datepicker" id="datepicker3" name="datepicker3" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期4" expand="datepicker" id="datepicker4" name="datepicker4" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期5" expand="datepicker" id="datepicker5" name="datepicker5" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期6" expand="datepicker" id="datepicker6" name="datepicker6" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期7" expand="datepicker" id="datepicker7" name="datepicker7" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期8" expand="datepicker" id="datepicker8" name="datepicker8" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期9" expand="datepicker" id="datepicker9" name="datepicker9" options="numberOfMonths:3"></s:textfield>
					<s:textfield label="日期10" expand="datepicker" id="datepicker10" name="datepicker10" options="numberOfMonths:3"></s:textfield>
					<w:package label="Country">
						<s:a id="countru" href="demo/control?resultName=layout&resultValue=layout" expand="fancybox" options="'type':'iframe'">Countries</s:a>
						<s:textfield label="选择" expand="fancybox" id="fancybox1" name="fancybox1" options="type:'iframe',href:'demo/control?resultName=layout&resultValue=layout'"></s:textfield>
					</w:package>
				</w:layout>
			</w:containermiddle>
		</w:container>
		<a class="d" href="demo/control?resultName=layout&resultValue=layout">test</a>
		<script>
	//$("#fancybox1_token").click(function(){$.fancybox({'hideOnOverlayClick':false,type:'iframe',href:'demo/tab'});});
	

/*

			$(document).ready(function() {
				$("#fancybox1_token").click(function() {
					$.fancybox({
						'transitionIn' : 'elastic',
						'transitionOut' : 'elastic',
						'hideOnOverlayClick' : false,
						'titlePosition' : 'inside',
						'padding' : 3,
						type : 'iframe',
						href : 'demo/layout'
					})
				})
			})
			*/
			$(document).ready(function(){});
			$(".d").fancybox({
				padding: 0,
				openEffect : 'elastic',
				openSpeed  : 200,
				closeEffect : 'elastic',
				closeSpeed  : 200,
				closeClick : true,
				type : 'iframe',
				helpers : {
					overlay : null
				}
			
			});
			
		</script>
	</body>
</html>